<template>
  <div
    class="tool-complex"
    :style="{
      background: attr.background,
      borderColor: attr.borderColor,
      borderWidth: `${attr.borderWidth}px`,
      backgroundImage: $methods.gradientReturnString('bg',attr.linearGradient),
    }"
  ></div>
</template>

<script>
import mixins from "../mixin";
export default {
  name: "tool-rectangle",
  mixins: [mixins],
  data() {
    return {
      attr: null,
    };
  },
  pageData: {
    version: "0.0.2",
    name: "tool-rectangle",
    title: "矩形",
    count: 0,
    width: 300,
    height: 150,
    config: {
      label: "矩形",
      active: [],
      attr: [
        {
          key: "borderWidth",
          title: "边框大小",
          hidden: false,
          formType: "text-number",
          group: "basics",
          type: "String",
          data: 2,
        },
        {
          key: "linearGradient",
          title: "背景渐变色", // 渐变色
          hiddenTitle: true,
          hidden: false,
          direction: 'column',
          formType: "color-linear-gradient",
          group: "linear-gradient",
          type: "Object",
          data: {
            type: "linear-gradient",
            angle: 45,
            colors: ["#409eff", "#0967F2"],
          },
        },
        {
          key: "borderColor",
          title: "边框颜色",
          formType: "color-picker",
          group: "basics",
          type: "String",
          data: "#ddd",
        },
        {
          key: "background",
          title: "背景颜色",
          formType: "color-picker",
          group: "basics",
          type: "String",
          data: "#fff",
        },
      ],
    },
  },
};
</script>

<style scoped>
.tool-complex {
  width: 100%;
  height: 100%;
  border: 1px solid #ddd;
  background-color: #fff;
  transition: all 0.58s;
}
</style>
